<template>
  <section class="task">
    <el-col :span="24" class="action-bar">
			<span class="task-form-text">状态：</span>
      <el-select v-model="taskState" clearable placeholder="请选择" style="margin:0 20px;">
        <el-option
          v-for="item in taskStatusSearch"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
		<el-button type="primary" size="medium" @click="search">筛选</el-button>
		<el-button type="primary" size="medium" @click="addTask">发布任务</el-button>
    </el-col>

    <!--列表-->
		<el-table :data="tasks" highlight-current-row class="el-table-style">
			<el-table-column type="selection" width="55">
			</el-table-column>
			<el-table-column type="index" width="60" sortable>
			</el-table-column>
			<el-table-column prop="name" label="任务名称" width="150" sortable>
			</el-table-column>
			<el-table-column prop="start_time" label="开始时间" width="180" sortable>
			</el-table-column>
			<el-table-column prop="end_time" label="截止时间" width="180" sortable>
			</el-table-column>
			<el-table-column prop="desc" label="任务描述" width="350" sortable>
			</el-table-column>
			<el-table-column prop="daka_name" label="状态" width="100" sortable>
				<template slot-scope="scope">
					<div>
						<el-tag type="success" v-show="scope.row.daka_name=='已完成'">{{scope.row.daka_name}}</el-tag>
						<el-tag type="" v-show="scope.row.daka_name=='未完成'">{{scope.row.daka_name}}</el-tag>
					</div>
				</template>
			</el-table-column>
			<el-table-column label="操作" width="250">
				<template slot-scope="scope">
					<div>
						<el-button type="primary" size="mini" @click="editor(scope.row.id)">编辑</el-button>
						<el-button type="danger" class="danger-btn" size="mini" @click="getTaskInfoDelete(scope.row.id)">删除</el-button>
						<el-button type="Success" size="mini" @click="getTaskDetail(scope.row.id)">查看详情</el-button>
					</div>
				</template>
			</el-table-column>
		</el-table>
		<el-col :span="24" class="footer-bar">
			<div class="page-code">
				<el-pagination
					background
					:page-size="16"
					layout="prev, pager, next"
					:total="totalPage"
					@current-change="pageChange"
						>
				</el-pagination>
			</div>
    </el-col>

		<!-- 新增  编辑-->
		<el-dialog :title="dialogTit" :visible.sync="addFormVisible" @close="initData">
			<el-form :model="addForm" label-width="80px" ref="addForm">
				<el-form-item label="任务名称" prop="taskName">
					<el-input v-model="addForm.taskName" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="开始时间">
					<el-date-picker type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期" v-model="addForm.startTime"></el-date-picker>
				</el-form-item>
				<el-form-item label="截止时间">
					<el-date-picker type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期" v-model="addForm.endTime"></el-date-picker>
				</el-form-item>
				<el-form-item label="执行者">
					<el-select
					v-model="executor"
					filterable
					remote
					:loading="loading"
					placeholder="请输入会员名"
					@change="getExecutor"
					:remote-method="searchName"
						>
					<el-option
						v-for="(item,index) in vipList"
						:key="item.vip_id"
						:label="item.realname"
						:value="index">
					</el-option>
				</el-select>
				<el-button size="medium " type="primary" @click="addExecutor">添加</el-button>
				<div v-for="(item,index) of executorList" :key="index" class="executorList">
					<div>
						<span>姓名：{{item.realname}}</span>
						<span>会员等级：{{item.vip_name}}</span>
						<i class="el-icon-remove"  @click.stop="deleteExecutor(index)"></i>
					</div>
				</div>
				</el-form-item>
				<el-form-item label="任务描述">
					<el-input type="textarea" v-model="addForm.intro"></el-input>
				</el-form-item>
				<el-form-item label="任务状态" v-if="editorFlag">
					<el-select v-model="addForm.taskState" clearable placeholder="请选择" style="margin:0 20px;">
						<el-option
						v-for="item in taskStatusSubmit"
						:key="item.value"
						:label="item.label"
						:value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="addFormVisible = false">取消</el-button>
				<el-button type="primary" v-if="newTaskFlag" @click="getTaskInfoInsert">提交</el-button>
				<el-button type="primary" v-else @click="getTaskInfoUpdate">提交</el-button>
			</div>
		</el-dialog>

  </section>
</template>

<script>
export default {
	data(){
		return {
		newTaskFlag:'',//区分发布还是标记
		dialogTit:'',
		addFormVisible: false,//新增界面是否显示
		addLoading: false,
		//新增界面数据
		addForm: {
			taskName: '',
			startTime: '',
			endTime: '',
			executor: [],//执行者
			intro:'',
			signIntegral:'',
			state:''
		},
		//搜索状态
		taskStatusSearch:[{label: '全部',value: ''},{label: '已完成',value: '1'},{label: '未完成',value: '0'}],
		//更改状态
		taskStatusSubmit:[{value: '已完成',label: '已完成'},{value: '未完成',label: '未完成'}],
		taskState: '',
				//类型
		tasks:[],
		users:'',
		editorFlag:'',//true弹框有任务状态
		vipList:[],//搜索到的执行人
		page:1,
		totalPage:0,
		loading:true,
		executor:'',
		executorList:[],//执行者
		id:''//编辑当条任务id
		}
	},
	computed: {
		executorIdList:function(val){
			const list = this.executorList;
			const newList=	list.map(item=>{
				return item.id
			})
			return newList
		}
	},
	methods:{
		addTask(){
			//发布任务
			this.newTaskFlag=true;
			this.addFormVisible=true;
			
		},
		editor(id){
			//编辑任务
			this.id=id;
			this.getTaskInfoDetail(id);
			this.newTaskFlag=false;
			this.addFormVisible = true;
			
		},
		search(){
			//筛选状态
			this.page=1;
			this.getTaskInfoList();
		},
		getExecutor(e){
			this.executor=e;
		},
		addExecutor(){
			//添加执行者
			if(isNaN(this.executor) || this.executor===''){
				return
			}
			const is_join= this.executorList.find(item=>{
				//判断是否已经在筛选的队列里
				return item.user_id==this.vipList[this.executor].user_id
			})
			if(is_join){
				this.executor='';
				return
			}
			this.executorList.push(this.vipList[this.executor]);
			this.executor='';
		},
		deleteExecutor(index){
			//删除执行者
			this.executorList.splice(index,1);
		},
		async searchName(name){
			//搜索用户名
			this.loading=true;
			if(!name){
				this.vipList=[];
				this.loading=false
				return
			}
			const res=await this.$api.getUserVipList ({
				page:0,
				pagesize:16,
				realname:name
			})
			if(res.data.level=='success'){
				this.vipList=res.data.data.user_vip_list
			}
			this.loading=false
    	},
		async getTaskInfoList(){
			//获取任务列表
			const res=await this.$api.getTaskInfoList({
				page:this.page,
				pagesize:16,
				status:this.taskState
			})
			if(res.data.level=='success'){
				this.tasks=res.data.data.task_info_list
				this.totalPage=res.data.data.total

			}
		},
		pageChange(e){
			//翻页
			this.page=e;
			this.getTaskInfoList()
		},
		handleSelect(e){
			//选中检索的执行人
		},
		async getTaskInfoInsert(){
			//发布任务
			this.dialogTit='发布任务';
			const res=await this.$api.getTaskInfoInsert({
				name:this.addForm.taskName,
				vipIds:this.executorIdList,
				startTime:this.addForm.startTime,
				endTime:this.addForm.endTime,
				desc:this.addForm.intro
			})
			 if(res.data.level=='success'){
				this.$message({
					message: res.data.message,
					type: 'success'
					});
					this.page=1;
					this.getTaskInfoList()
					this.addFormVisible=false;
			}else{
				this.$message({
				message: res.data.message,
				type: 'error'
				});
          }
		},
		async getTaskInfoDelete(id){
			//删除任务
			const judge= this.$confirm('删除该值班?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
				}).then(async() => {
					const res=await this.$api.getTaskInfoDelete({id})
					if(res.data.level=='success'){
						this.getTaskInfoList();
						this.$message({
							type: 'success',
							message: res.data.message
						});
					}else{
						this.$message({
							type: 'error',
							message: res.data.message
						});
					}
					
				}).catch(() => {
          
			});
			
		},
		async getTaskInfoDetail(id){
			//编辑前获取任务信息
			const res=await this.$api.getTaskInfoDetail({
				id
			})
			if(res.data.level=='success'){
				const data=res.data.data.task_info;
				this.addForm.taskName=data.name;
				this.executorList=data.user_list;
				this.addForm.startTime=data.start_time;
				this.addForm.endTime=data.end_time;
				this.addForm.intro=data.desc;
			}
		},
		getTaskDetail(id){
			//跳转任务详情业
			this.$router.push({name:'TaskDetail',params:{id}})
		},
		async getTaskInfoUpdate(){
			//提交编辑的任务
			const res=await this.$api.getTaskInfoUpdate({
				name:this.addForm.taskName,
				vipIds:this.executorIdList,
				startTime:this.addForm.startTime,
				endTime:this.addForm.endTime,
				desc:this.addForm.intro,
				id:this.id
			})
			if(res.data.level=='success'){
				this.$message({
					message: res.data.message,
					type: 'success'
					});
					this.page=1;
					this.getTaskInfoList()
					this.addFormVisible=false;
			}else{
				this.$message({
				message: res.data.message,
				type: 'error'
				});
          }
		},
		initData(){
			this.addForm.taskName='';
			this.executorList=[];
			this.addForm.startTime='';
			this.addForm.endTime='';
			this.addForm.intro='';
			this.id=''
		}
	},
	mounted() {
		this.getTaskInfoList()
	},
}
</script>
<style lang='scss' scoped>
  .task{
    .action-bar{
			background-color: #f2f2f2;
			height: 60px;
      margin: 10px 0px;
      box-sizing: border-box;
			display: flex;
			align-items: center;
			padding-left: 20px;
			.action-bar-input{
				width: 250px;
				margin-right: 14px;
      }
      .task-form-text{
				color: #666666;
			}
		}
		.el-table-style{
			width: 100%;
			border: 1px solid #f2f2f2;
		}
		.footer-bar{
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: #f2f2f2;
			padding: 8px;
			margin: 10px 0px;
			box-sizing: border-box;
		}
		.dialog-footer{
			text-align: center;
		}
		.executorList{
			display: flex;
			flex-wrap: wrap;
			div{
				margin:10px;
				border:1px solid #eee;
				border-radius: 5px;
				padding:5px 10px;
			}
		}
  }
</style>

<style>
	.el-pagination.is-background .el-pager li,
	.el-pagination.is-background .btn-prev,
	.el-pagination.is-background .btn-next
	{
		background-color: #fff;
		border: 1px solid #f1f1f1;
		margin: 0;
	}

	.task .el-dialog__body{overflow: auto;}
</style>
